<template>
	<view>
		<view class="page">
			<view class="top" :style="`padding-top:` + $store.state.StatusBar.statusBar + `px`">
				<view class="top-icon" @click="back">
					<u-icon name="arrow-left" size="42rpx" color='#fff'></u-icon>

				</view>
				<view class="top-title c-fff">{{ title }}</view>
			</view>
			<view class="body" :style="`margin-top:` + $store.state.StatusBar.statusBar + `px`">
				<view class="list">
					<view class="item">
						<view class="label c-fff">原密码</view>
						<view>
							<input v-model="password" type="text" placeholder="请输入原密码">
						</view>
					</view>
					<view class="item">
						<view class="label c-fff">新密码</view>
						<view>
							<input v-model="newpassword" type="text" placeholder="请输入新密码">
						</view>
					</view>
					<view class="item">
						<view class="label c-fff">再次密码</view>
						<view>
							<input v-model="surepassword" type="text" placeholder="请输入再次密码">
						</view>
					</view>
				</view>
				<view class="button" @click="submit">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
import { to } from '@/utils/index.js';
import md5 from '@/utils/md5.js';
export default {
	data() {
		return {
			title: '修改密码',
			info: {},
			password: '',
			newpassword: '',
			surepassword: ''
		}
	},
	methods: {
		to,
		back() {
			to()
		},
		async submit() {
			let res = await this.$c.post("/app/user/xiugai?password=" + md5.hex_md5(this.password) + "&newpassword=" + md5.hex_md5(this.newpassword)
				+ "&surepassword=" + md5.hex_md5(this.surepassword));
			if (res.code != 0) {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				return;
			}
			uni.showToast({
				title: "提交成功",
				icon: "none",
				success() {
					uni.navigateBack()
				}
			})
			
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	width: 100vw;
	padding: 30rpx;
	height: 100vh;
	/* background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff); */
}

.top {
	position: fixed;
	top: 0rpx;
	width: 100%;
	/* background-color: #e3ecfb; */
	z-index: 999;
	text-align: center;
	vertical-align: middle;
	padding: 10rpx;
}

.top-icon {
	position: absolute;
	left: 30rpx;
	z-index: 99;
	width: 30rpx;
	height: 30rpx;
}

.top-title {
	line-height: 50rpx;
	display: block;
	height: 50rpx;
	z-index: 99;
}

.body {
	padding-top: 40rpx;
	text-align: center;

	.title {
		margin-top: 40rpx;
		font-size: 24rpx;
	}

	.button {
		background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);

		color: #fff;
		display: inline-block;
		padding: 30rpx 0rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		width: 80%;
		margin-top: 30rpx;
	}

	.mark {
		width: 100%;
		margin-top: 30rpx;
		text-align: left;
		font-size: 20rpx;
		color: #9d9395;
	}

	.list {
		margin-top: 60rpx;

		.item {
			height: 80rpx;
			padding: 15rpx;
			position: relative;

			.label {
				position: absolute;
				left: 40rpx;
			}
		}
	}
}
</style>